<template>
  <div>
    <div v-if="show" class="form-title">
      {{ formKey }}
    </div>
    <div class="test-form">
      <parser v-if="show" :key="key1" :form-conf="formConf" @submit="sumbitForm1" />
    </div>
    <div v-if="!show" class="form-title">
      感谢您的参与！(●'◡'●)
    </div>
  </div>
</template>

<script>
import Parser from '../Parser'
import { getInfos, getUrlKey, insertRow } from '@/api/infos'
// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'
export default {
  components: {
    Parser
  },
  props: {},
  data() {
    return {
      key2: +new Date(),
      key1: +new Date(),
      show: true,
      formKey: '',
      // 表单变量
      formtmp: {
        key: null,
        value: null,
        ngs_id: null,
        ngs_uid: null
      },
      // 表单ID
      ngs_id: '',
      // 用户id
      ngs_uid: '',
      formConf: {
        fields: [],
        __methods__: {
          clickTestButton1() {
            console.log(
              `%c【测试按钮1】点击事件里可以访问当前表单：
                1) formModel='formData', 所以this.formData可以拿到当前表单的model
                2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
              `,
              'color:#409EFF;font-size: 15px'
            )
            console.log('表单的Model：', this.formData)
            console.log('表单的ref：', this.$refs.elForm)
          }
        },
        formRef: 'elForm',
        formModel: 'formData',
        size: 'small',
        labelPosition: 'right',
        labelWidth: 100,
        formRules: 'rules',
        gutter: 15,
        disabled: false,
        span: 24,
        formBtns: true,
        unFocusedComponentBorder: false
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 获取数据库数据
    this.getList(this.formConf)

    // 表单数据回填，模拟异步请求场景
    /* setTimeout(() => {
      // 请求回来的表单数据
      const data = {
        mobile: '18836662555'
      }
      // 回填数据
      this.fillFormData(this.formConf, data)
      // 更新表单

      this.key1 = +new Date()
    }, 2000) */
  },
  methods: {
    getList(formConf) {
      const path = window.location.href.split('?') // 分割url
      const href = `${path[0]}?${path[1]}`
      // 如果url中参数base64编码
      /* let query = Base64.decode(path[1])  //解码
       href = path[0]+"?"+ query //解码后重组 */
      const id = getUrlKey('id', href)
      this.ngs_id = id
      const uid = getUrlKey('uid', href)
      this.ngs_uid = uid
      getInfos(id).then(response => {
        this.formKey = response.data.formMemo
        const fileds = JSON.parse(response.data.fields)
        formConf.fields = fileds.fields
        formConf.disabled = fileds.disabled
        formConf.formRef = fileds.formRef
        formConf.formModel = fileds.formModel
        formConf.size = fileds.size
        formConf.labelPosition = fileds.labelPosition
        formConf.labelWidth = fileds.labelWidth
        formConf.formRules = fileds.formRules
        formConf.gutter = fileds.gutter
        formConf.span = fileds.span
        formConf.formBtns = fileds.formBtns
        this.key1 = +new Date()
      })
    },
    fillFormData(form, data) {
      form.fields.forEach(item => {
        const val = data[item.__vModel__]
        if (val) {
          item.__config__.defaultValue = val
        }
      })
    },
    change() {
      this.key2 = +new Date()
      const t = this.formConf
      this.formConf = this.formConf2
      this.formConf2 = t
    },
    sumbitForm1(data) {
      const key = []
      const value = []
      this.formConf.fields.forEach(item => {
        key.push(item.__vModel__)
        const val = data[item.__vModel__]
        value.push(val)
      })
      this.formtmp.formId = this.ngs_id
      this.formtmp.uid = this.ngs_uid
      this.formtmp.key = key
      this.formtmp.value = value
      insertRow(this.formtmp).then(response => {
        if (response.code === 200) {
          this.$notify({
            title: '成功',
            message: '感谢您的参与',
            type: 'success'
          })
          this.show = false
        } else {
          this.$message.error(`提交失败！请联系管理员${response.message}`)
        }
      })

      /* this.formtmp.key = key
      this.formtmp.value = value */
      console.log(this.formtmp)
      /* insertRow(this.formtmp).then(response => {
        if (response.code === 200) {
          this.$notify({
            title: '成功',
            message: '提交表单成功！感谢您的参与！',
            type: 'success'
          })
        } else {
          this.$message.error(response.message)
        }
      }) */
    },
    sumbitForm2(data) {
      console.log('sumbitForm2提交数据：', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}
.form-title {
  align-content: center;
  text-align: center;
  font-size: 50px;
  color: blue;

}
</style>
